<template>
    <div class="attr-list">
        <div class="attr-list-item" v-for="item in recommendAttrs" :key="item.attrId" @click="goAttrDetail(item.attrId)">
            <span class="img">
                <el-image :src="item.bannerUrl" class="banner"></el-image>
            </span>

            <div class="attr-info">
                <div class="title">{{ item.name }}</div>
                <div class="area">地区：{{ item.areaName }}</div>
                <span class="price">￥{{ item.price }}</span>
            </div>

        </div>
    </div>
</template>
 
<script>
import { mapGetters } from 'vuex';
import { getRecommendAttrs } from '@/api/travel';

export default {
    name: 'RecomAttr',
    created() {
        if (this.token) {
            getRecommendAttrs().then(res => {
                const { recommendAttrs } = res.data
                this.recommendAttrs = recommendAttrs
            })
        }
    },
    computed: {
        ...mapGetters([
            'token'
        ])
    },
    data() {
        return {
            recommendAttrs: []
        }
    },
    methods: {
        goAttrDetail(id) {
            console.log(id)
            this.$router.push({
                path: '/attraction/' + id
            })
        }
    }
}
</script>
 
<style lang="less" scoped>
.attr-list {
    .attr-list-item:hover {
        .attr-info {
            .title {
                color: #ff9d00;
            }
        }
    }

    .attr-list-item {
        display: flex;
        margin-bottom: 20px;
        // display: block;
        // padding-left: 110px;
        // height: 70px;
        // overflow: hidden;
        // font-size: 14px;
        // line-height: 20px;
        // color: #333;

        .img {
            // float: left;
            // margin-left: -110px;
            width: 100px;
            height: 70px;
            overflow: hidden;

            .banner {
                height: 70px;
                width: 100px;
            }
        }

        .attr-info {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            justify-content: space-between;

            .title {
                // height: 40px;
                // margin-bottom: 12px;
                margin: 0;
                padding: 0;
                word-wrap: break-word;
                font-size: 14px;
                color: #333;
            }

            // .title:hover {
            //     color: #ff9d00;
            // }
            .area {
                font-size: 12px;
                color: #999;
            }

            .price {
                color: #ff9d00;
            }

        }




    }
}
</style>